<template>
  <NoActionGoBack/>
  <div class="hm-nav wrap-wh">
    <h1 class="tit-word"></h1>
    <div class="start" @click="routerGo({path:'login'})"></div>
    <div class="ranks" @click="routerGo({path:'rankings',query:{id:'zongpaihangbang'}})"></div>
    <!--    <el-button type="primary" @click="routerGo('home')">首页</el-button>-->
  </div>
</template>

<script lang="ts" setup>
import {reactive,} from 'vue';
import {useRouter} from "vue-router"

let list = reactive([
  {name: 1, val: 2}
])
const router = useRouter()

function routerGo(route: { path: string, query?: { id: string } }) {
  router.push({
    ...route
  })
}

</script>
<style lang="scss" scoped>
.hm-nav {
  background: url("../assets/Nav/navbg.png") no-repeat;

  .tit-word {
    width: 1487px;
    margin: 0 auto;
    height: 197px;
    background: url("../assets/Nav/title.png") no-repeat;
    background-size: cover;
    position: relative;
    top: 330px;
  }

  .start, .ranks {
    width: 345px;
    height: 345px;
    background-size: cover;
    position: absolute;
    top: 550px;
    cursor: pointer;
  }

  .start {
    left: 580px;
    background: url("../assets/Nav/start.png") no-repeat;
  }

  .ranks {
    right: 580px;
    background: url("../assets/Nav/ranks.png") no-repeat;
  }


  .title {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    //transform: (-50% -50%);
  }
}

</style>
